<template>
  <view class="relative bg-white order-list">
    <nav-bar color="white" bg-color="black" title="账户流水" show-back></nav-bar>
    <u-row gutter="10rpx" customStyle="padding:8rpx;">
      <u-col span="3">
        <u-search
          shape="square"
          placeholder="请输入交易流水号"
          v-model="filterPam.customerAccountRecordId"
          search-icon-size="15rpx"
          @custom="getPageData(true)"
        ></u-search>
      </u-col>
      <!-- <u-col span="3">
        <u-search
          shape="square"
          placeholder="请输入会员姓名"
          v-model="filterPam.customerName"
          search-icon-size="15rpx"
          @custom="getPageData(true)"
        ></u-search>
      </u-col> -->
      <u-col span="1">
        <u-button
          type="info"
          color="lightgrey"
          @click="(filterPam.customerName = ''), (filterPam.physicalCardNumber = ''), getPageData(true)"
          >清空</u-button
        >
      </u-col>
    </u-row>
    <u-row>
      <view class="px-12rpx w-full box-border">
        <uni-table :loading="pageStatus.loading" class="table-height" stripe emptyText="暂无更多数据" :border="true">
          <!-- 表头行 -->
          <uni-tr class="thead-tr">
            <uni-th align="center" class="fixed-left">序号</uni-th>
            <uni-th align="center">交易类型</uni-th>
            <!-- <uni-th align="center">账户类型</uni-th> -->
            <uni-th align="center">交易金额/积分</uni-th>
            <uni-th align="center">交易时间</uni-th>
            <uni-th align="center">备注</uni-th>
            <uni-th align="center">交易流水号</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in orderList" :key="item.buffetOrderId">
            <uni-td align="center" class="fixed-left">{{ index + 1 }}</uni-td>
            <uni-td align="center">{{ getFieldValue("sys_dataSources", item.dataSources) }}</uni-td>
            <!-- <uni-td align="center">{{ getFieldValue("sys_payType", item.consumptionTypes) }}</uni-td> -->
           
            <uni-td align="center">
              <text :class="['font-bold', item.incomeExpenditure == '1' ? 'text-green-500' : 'text-red-500']">
                {{ item.incomeExpenditure == "1" ? "+" : "-" }}
                {{ item.moneyIntegral }}
              </text>
            </uni-td>
            <uni-td align="center">{{ item.createTime || "-" }}</uni-td>
            <uni-td align="center">{{ item.remark || "-" }}</uni-td>
            <uni-td align="center">{{ item.customerAccountRecordId || "-" }}</uni-td>
          </uni-tr>
        </uni-table>
        <view class="pagination-box">
          <uni-pagination
            show-icon
            :page-size="filterPam.size"
            :current="filterPam.current"
            :total="filterPam.total"
            @change="pageChange"
          />
        </view>
      </view>
    </u-row>
  </view>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, inject } from "vue";
import { customerBalancePage } from "@/api";
import { formatMoney, getFieldValue, getFieldValueByThisDict, loadSysDict } from "@/utils/util";
import { useStore } from "vuex";
import { onLoad } from "@dcloudio/uni-app";

const pageStatus = reactive({
  loading: false,
});

const filterPam = reactive({
  current: 1,
  size: 10,
  total: 0,
  // customerAccountRecordId: "",
});

const orderList = ref([]);

const pageChange = (e) => {
  filterPam.current = e.current;
  getPageData();
};

const getPageData = async (isRelaod = false) => {
  if (isRelaod) {
    filterPam.current = 1;
  }
  pageStatus.loading = true;
  try {
    const pam = {
      descs: 'create_time',
      userId:pageParam.id,
      ...filterPam,
    };
    const { data, success } = await customerBalancePage(pam);
    console.log(data);
    if (!success) throw new Error("获取数据失败");
    orderList.value = data.records || [];
    filterPam.total = data.total || 0;
    pageStatus.loading = false;
  } catch (error) {
    pageStatus.loading = false;
    console.error(error);
  }
};

const store = useStore();


const pageParam = reactive({
  id: "",
});

onLoad((options: any) => {
  if (options.id) pageParam.id = options.id;
});

onMounted(async () => {
  getPageData();
});

// 其他自定义字典
const dicts = reactive({
  membershipCardType: [
    { dictValue: "1", dictLabel: "普通办卡" },
    { dictValue: "2", dictLabel: "套餐办卡" },
  ],
  sys_dataSources: [],
  sys_payType: [],
});

const initDicts = async () => {
  try {
    /** 字典 */
    await loadSysDict(["sys_dataSources", "sys_payType"]);
    const dictSource = store.getters["dicts/getDictSource"];
    Object.assign(dicts, dictSource);
    // console.log("onLoad >> loadSysDict", dicts);
  } catch (error) {
    console.warn("ERROE >> ", error);
  }
};

initDicts();
</script>
<style lang="scss" scoped>
.order-list {
  ::v-deep .u-search__content {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: -10px;
    height: 25rpx;

    // .u-search__content__icon {
    //   display: none;
    // }

    .uni-input-input {
      height: 25rpx;
    }
  }
  ::v-deep .u-search__action {
    background: var(--kui-color-theme);
    max-height: 25rpx;
    height: 25rpx;
    border-radius: 3rpx;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5rpx;
    font-size: 10rpx;
  }

  ::v-deep .u-button {
    border-radius: 3rpx;
    height: 25rpx;
  }
}

.fixed-left {
  position: sticky;
  background-color: white;
  left: 0;
}

.fixed-right {
  display: flex;
  position: sticky;
  right: 0;

  &.thead {
    display: block;
    box-shadow: -6px 0px 5px 0px #e7e7e7;
  }

  &.tdata {
    background-color: white;
    box-shadow: -6px 0px 5px 0px #e7e7e7;
  }
  ::v-deep .u-button {
    margin-right: 5rpx;
    height: 20rpx;
  }
}

.thead-tr {
  position: sticky;
  top: 0;
}

.table-height {
  max-height: 70vh;
}

.pagination-box {
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: right;
  position: sticky;
  bottom: 0;
  background: white;
}
</style>
